<!-- html -->
<template>
  <h2 class="h2">ref，基本类型</h2>
  <span class="span2">num1：</span>
  <input class="input1" type="number" v-model="num1">
  <span class="span2">num2：</span>
  <input class="input1" type="number" v-model="num2">
  <button class="button1" @click="changeNum1">修改num1</button>
  <button class="button1" @click="showSum">查看和</button>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'refTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref } from 'vue'
//数据
//ref：创建响应式对象
let num1 = ref(1)
let num2 = ref(1)
console.log('num1：', num1)
console.log('num2：', num1)
//方法
function changeNum1() {
  num1.value += 1
}
function showSum() {
  alert(num1.value + num2.value)
}
</script>

<!-- 样式 -->
<style scoped></style>